<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>div</div>
<p>pppp</p>
<span>span</span>
<span>span</span>
<div>div</div>
<div>div</div>
<span>span</span>
<div>div</div>
<p>pppp</p>
<span>span</span>
<div>div</div>
<p>pppp</p>
<span>span</span>
<span>span</span>
<span>span</span>
</body>
<script>
   /* function t (tagName,dom){
        dom = dom || document;
        //左边为真就是左边 左边为假就是右边
        return dom.getElementsByTagName(tagName);
    };*/
    /*var array = [];
//    var div_list = t('div');
//    var span_list = t('span');
//    var array1 = select('div,span');
//    array.push.apply(array,array1);
//    array.push.apply(array,array1);
    array.push.apply(array,select('div,span'))
//    for(var i=0;i<array.length;i++){
//        array[i].style.border = '1px dashed blue'
//    };

    //设置css3的选择器
    function select(selector){
        return document.querySelectorAll(selector)
    };
    array.forEach(function(v,i){
        v.style.border = '2px dashed red'
    })*/
    /*
    *
    * 传统编码的问题
    * 获得元素方法名太长 出现错误几率变大
    * 有重复代码的嫌疑 获得元素重复 循环遍历增加样式重复
    * */

    //先封装获取方法

    function select(selector){
        var arr = [];
        arr.push.apply(arr,document.querySelectorAll(selector));
        return arr;
    };

    //用获取方法获取元素
//    var array = [];
   //放到数组里 因为获取到的事一个伪数组需要用push和apply方法
//   array.push.apply(array,select('div,p'))  ;
    //forEach设置样式
   select('div,span').forEach(function(v,i){
       v.style.border = v.nodeName.toUpperCase()==='DIV'? '5px solid orange':'5px dashed skyblue';
   });

</script>
</html>